<template>
  <van-cell>
    <van-image slot="icon"
               round
               width="30"
               height="30"
               style="margin-right: 10px;"
               :src="commentInfo.aut_photo" />
    <span style="color: #466b9d;"
          slot="title">{{commentInfo.aut_name}}</span>
    <div slot="label">
      <p style="color: #363636;">{{commentInfo.content}}</p>
      <p>
        <span style="margin-right: 10px;">{{ commentInfo.pubdate | getRelativeTime}}</span>
        <van-button size="mini"
                     @click="$emit('openReply',commentInfo)"
                    type="default">回复({{commentInfo.reply_count}})</van-button>
      </p>
    </div>
    <van-icon slot="right-icon"
              @click="zanClick"
              :name="commentInfo.is_liking ? 'good-job':'good-job-o'">
      {{commentInfo.like_count}}
    </van-icon>
  </van-cell>
</template>

<script>
import { addCommentLike, deleteCommentLike } from '@/api/comment'
export default {
  props: {
    // 评论或回复信息
    commentInfo: {
      type: Object,
      required: true
    }
  },
  methods: {
    // 点赞，取消点赞
    async zanClick () {
      try {
        if (this.commentInfo.is_liking) {
          // 点赞了，取消
          await deleteCommentLike(this.commentInfo.com_id)
        } else {
        // 未点赞，要点赞
          await addCommentLike(this.commentInfo.com_id)
        }
        // 提示成功
        this.$toast.success(this.commentInfo.is_liking ? '取消成功' : '点赞成功')
        // 更新数量
        if (this.commentInfo.is_liking) {
          this.commentInfo.like_count--
        } else {
          this.commentInfo.like_count++
        }
        // 更新视图
        this.commentInfo.is_liking = !this.commentInfo.is_liking
      } catch (error) {
        console.dir(error)
        if (error.response.status === 401) {
          // 提示一下
          this.$toast.fail('请登录')
        } else {
          this.$toast.fail(this.commentInfo.is_liking ? '取消失败' : '点赞失败')
        }
      }
    }
  }
}
</script>

<style>

</style>
